<template>  
  <div>  
    
    <Title :title="title"></Title>
    <div ref="chartContainer" style="height: 150px;"></div>  
  </div>  
</template>  
  
<script setup>  
import Title from './Title.vue';
const title=ref('二氧化硫浓度'); 
import { ref, onMounted, onUnmounted } from 'vue';  
import { Area } from '@antv/g2plot';  
  

const chartContainer = ref(null);  
let chartInstance = null;  
  
// 模拟的湿度数据
let humidityData = [  
  { time: '00:00', wet: 38 },  
  { time: '01:00', wet: 52 },  
];  
  
// 模拟实时数据更新的函数  
function fetchHumidityData() {  
  const index = Math.floor(Math.random() * humidityData.length);  
  humidityData[index].wet = Math.floor(Math.random() * 100); 
  
}  
   
function initChart() {  
  if (chartContainer.value) {  
    chartInstance = new Area(chartContainer.value, {  
      data: humidityData,  
      xField: 'time',
      yField: 'wet', 
      areaStyle: {  
        fill: '#1890ff', // 填充颜色  
      },  
      smooth: true, // 是否平滑曲线  
      yAxis: {  
        label: {  
   
        },  
      },  
      meta: {  
        time: {  
          alias: '时间',  
        },  
        wet: {  
          alias: '湿度',  
        },  
      },  
    });  
  
    chartInstance.render();  
  }  
}  
onMounted(() => {  
  initChart();  
  setInterval(fetchHumidityData, 3000); 
});  
  

</script>  
  
<style scoped>  
</style>